<template>
	<!-- <view>
		<image class="bg" src="/static/login/log_bg.png" mode="scaleToFill"></image> -->
	<view class="content" :style="{'background':kbackgroundColor}" style="min-height: 100vh;">
		<!-- <image class="mart_bg" src="/static/detail/detail_bg.png" mode="scaleToFill"></image> -->
		<hx-navbar :title="info.name" :back="true" :fixed="false" :color="knavTitleColor" barPlaceholder="hidden"
			transparent="auto"></hx-navbar>
		<!-- <view class="noticeTip" @click="toRecord()" :style="{color:kselectColorSize}">交易记录</view> -->
		<!-- <view class="qbnoticeTip" @click="toAllshop()" :style="{border:borderSty}">查看全部</view> -->
		<view class="container">
			<view class="collect_img_box">
				<view class="imgCont" :class="[{'linear_box':yansheng==='black'},{'white_box':yansheng==='purple'}]">
					<view class=""
						style="width: 97%;height: 97%;margin: 10rpx auto;background-color: #000;border-radius: 40rpx;">
						<image :src="info.image" mode="aspectFit" class="collect_image"></image>
					</view>
					<!-- <iframe :src="info.image" v-if="info.type == 1" class="collect_image" frameborder="0"></iframe> -->
				</view>
				<view class="title" :style="{color:knavTitleColor}">{{info.name}}</view>
				<view class="dataWrap">
					<view :class="[{'data':yansheng==='black'},{'num':yansheng==='purple'}]">
						<text>限量</text>
						<text>{{info.quantity}}份</text>
					</view>
					<view :class="[{'data':yansheng==='black'},{'num':yansheng==='purple'}]">
						<text>流通</text>
						<text>{{circulate}}份</text>
					</view>
				</view>
			</view>

			<view class="price-view" :class="[{'border-black':ktheme =='black'},{'border-purple':ktheme =='purple'}]">
				<view class="price-current"
					:class="[{'border-black':ktheme =='black'},{'border-purple':ktheme =='purple'}]">
					<text class="title" :style="{color:knormalColor}">最新成交价</text>
					<text class="price" :style="{color:kselectColorSize}">¥ {{orderSum.payPrice/100 || 0}}</text>
				</view>
				<view class="price-column">
					<view class="price-row">
						<text class="title">今日最高</text>
						<text class="subtitle" :style="{'color':'#E31212'}">¥ {{orderSum.maxAmount/100 || 0}}</text>
					</view>
					<view class="price-row">
						<text class="title">今日最低</text>
						<text class="subtitle" :style="{'color':'#39DA10'}">¥ {{orderSum.minAmount/100 || 0}}</text>
					</view>
					<view class="price-row">
						<text class="title">今日成交量</text>
						<text class="subtitle" :style="{color:knormalColor}">{{orderSum.num || 0}}</text>
					</view>
					<view class="price-row">
						<text class="title">地板价</text>
						<text class="subtitle" :style="{color:knormalColor}">¥ {{orderSum.lowPrice/100 || 0}}</text>
					</view>
					<view class="price-row">
						<text class="title">首发价</text>
						<text class="subtitle" :style="{color:knormalColor}">¥ {{orderSum.price/100 || 0}}</text>
					</view>
				</view>
			</view>
			<!--			<view class="detail-item" @click="toRecord()">-->
			<!--				<text :style="{color:kselectColorSize}">查看流转记录</text>-->
			<!--				<view class="line" :style="{'background-color':kselectColorSize}"></view>-->
			<!--			</view>-->
			<!--			 <view class="detail-item" @click="pushKmap()">-->
			<!--				<text :style="{color:kselectColorSize}">交易图</text>-->
			<!--				<view class="line" :style="{'background-color':kselectColorSize}"></view>-->
			<!--			</view>-->
			<!-- 版权分类 -->
			<view class="tab_box">
				<template v-for="(item, index) in typeList">
					<view class="tab_dd tabActive" @tap="selectType(index)" :style="selStyle" :key="index">
						<text>{{item.name}}</text>
					</view>
				</template>
			</view>
			<view class="list-view" v-if="list && list.length >0"
				:class="[{'border-black':ktheme =='black'},{'border-purple':ktheme =='purple'}]">
				<view class="goodslist" :style="{color:knormalColor}">
					<view class="sort" :class="[ifscroll?'ifsceollclass':'sortsce']"
						:style="{'background-color':ktheme =='black' ? '#222':'#fff' }">
						<view class="sort_box">
							<!-- <view class="sort_box-item" style="width: 50%;">
								<text class="asc" :class="{'active': order =='give_time desc'}"
									@click="setOrder('give_time desc')">最新上架</text>
							</view> -->
							<view class="sort_box-item" :style="[seltyle]">
								<text class="asc"
									:class="[{'active active-black':(ktheme =='black' && order)},{'active active-white':(ktheme =='purple' && order)}]"
									@click="setOrder(true)">价格升序</text>
							</view>
							<view class="sort_box-item" :style="[seltyle]">
								<text class="desc"
									:class="[{'active active-black':(ktheme =='black' && !order)},{'active active-white':(ktheme =='purple' && !order)}]"
									@click="setOrder(false)">价格降序</text>
							</view>
						</view>
					</view>
					<!-- <scroll-view class="scroll" scroll-y="true" @scrolltolower="lower"> -->
					<view class="list">
						<template v-for="(item, index) in list">
							<view class="item" :key="index">
								<view class="ceil" style="width: 47%;">
									<view class="label">
										<image
											:src="!item.market_lock_status?'/static/mart/shou.png':'/static/mart/lock.png'"
											mode="aspectFit"></image>
										<text>{{item.tokenId}}</text>
									</view>
									<view class="new_pay_container">
										<text>支持钱包</text>
										<image v-if="item.walletStatus.xtStatus" src="/static/mart/xtpay.png"></image>
										<image v-if="item.walletStatus.sdStatus" src="/static/mart/sdpay.png"></image>
										<image v-if="item.walletStatus.hfStatus" src="/static/mart/hfpay.png"></image>
									</view>
									<!-- <view class="name">发行方：{{item.author_name}}</view> -->
								</view>
								<view class="ceil" style="width: 30%;">
									<view class="price">
										<text class="unit">￥</text><text>{{item.price|fp}}</text>
									</view>
									<view class="name">寄售价格</view>
								</view>
								<view class="ceil" style="width:20%;">
									<view class="buy" :style="{background:buttonBcak}" @tap="go_detail(item)"
										v-if="!item.payLock">
										立即购买
									</view>
									<view v-else class="status">支付中</view>
								</view>
							</view>
						</template>
					</view>
				</view>
				<!-- 回到顶部 -->
			</view>
			<view class="scrollClsss" v-if="ifscroll" @click="scrollClick(0)">
				<image src="@/static/user/huojian.png" style="width: 110rpx;" mode="widthFix"></image>
			</view>
		</view>
		<view style="height:120rpx;"></view>
		<view class="bottom-view" :style="{'background':ktabbarBgColor}">
			<view class="operate" @click="openbatch" :style="{background:buttonBcak}">批量下单</view>
			<view class="operate" @click="openfast" :style="{background:buttonBcak}">快捷下单</view>
		</view>
		<uni-popup ref="orderForm" type="share" safeArea>
			<view class="" style="height: 620rpx;border-radius: 30rpx  30rpx 0 0;background-color: #fff;">

				<view class="" style="width: 100%;height: 600rpx;position: relative;">
					<view class="" style="width: 100%;height: 90rpx;">
						<view class="" @tap="closebatch"
							style="position: absolute;right: 20rpx;top:15rpx;width: 35rpx;height: 35rpx;border-radius: 40rpx;text-align: center;line-height: 70rpx;">
							<image src="@/static/index/close.png" style="width:100%;" mode="widthFix"></image>
						</view>

					</view>
					<view class="order_info_item"
						style="display: flex;justify-content: space-between;padding: 20rpx 50rpx;">
						<view class="">
							购买数量
						</view>
						<view class="">
							<uni-number-box v-model="batchNum" :max="100" :min="1" @change="changeValue" />
							<!-- @blur="blur" @focus="focus"  /> -->
						</view>
					</view>
					<view class="order_info_item"
						style="display: flex;align-items:center;justify-content: space-between;padding: 20rpx 50rpx;">
						<view class="">
							支付方式
						</view>
						<view class="order_pay_select">
							<view v-if="walletStatus.xtStatus">
								<image v-if="pay_way === 7" src="/static/mart/xt_select.png"></image>
								<image v-else src="/static/mart/xtpay.png" @click="pay_way = 7"></image>
							</view>
							<view v-if="walletStatus.sdStatus">
								<image v-if="pay_way === 5" src="/static/mart/sd_select.png"></image>
								<image v-else src="/static/mart/sdpay.png" @click="pay_way = 5"></image>
							</view>
							<view v-if="walletStatus.hfStatus">
								<image v-if="pay_way === 2" src="/static/mart/hf_select.png"></image>
								<image v-else src="/static/mart/hfpay.png" @click="pay_way = 2"></image>
							</view>
						</view>
					</view>
					<view class="" style="height:100rpx;margin: 0 auto ;width: 100%;position:absolute;bottom:  50rpx;">
						<view class="btntk" @tap="createBatchOrder" :style="{background:buttonBcak}">
							提交
						</view>
					</view>
				</view>
			</view>
		</uni-popup>
		<uni-popup ref="fastForm" type="share" safeArea>
			<view class="" style="height: 620rpx;border-radius: 30rpx  30rpx 0 0;background-color: #fff;">

				<view class="" style="width: 100%;height: 600rpx;position: relative;">
					<view class="" style="width: 100%;height: 90rpx;">
						<view class="" @tap="closefast"
							style="position: absolute;right: 20rpx;top:15rpx;width: 35rpx;height: 35rpx;border-radius: 40rpx;text-align: center;line-height: 70rpx;">
							<image src="@/static/index/close.png" style="width:100%;" mode="widthFix"></image>
						</view>

					</view>
					<view class="order_info_item"
						style="display: flex;align-items:center;justify-content: space-between;padding: 20rpx 50rpx;">
						<view class="">
							支付方式
						</view>
						<view class="order_pay_select">
							<view v-if="walletStatus.xtStatus">
								<image v-if="pay_way_fast === 7" src="/static/mart/xt_select.png"></image>
								<image v-else src="/static/mart/xtpay.png" @click="pay_way_fast = 7"></image>
							</view>
							<view v-if="walletStatus.sdStatus">
								<image v-if="pay_way_fast === 5" src="/static/mart/sd_select.png"></image>
								<image v-else src="/static/mart/sdpay.png" @click="pay_way_fast = 5"></image>
							</view>
							<view v-if="walletStatus.hfStatus">
								<image v-if="pay_way_fast === 2" src="/static/mart/hf_select.png"></image>
								<image v-else src="/static/mart/hfpay.png" @click="pay_way_fast = 2"></image>
							</view>
						</view>
					</view>
					<view class="" style="height:100rpx;margin: 0 auto ;width: 100%;position:absolute;bottom:  50rpx;">
						<view class="btntk" @tap="confirm" :style="{background:buttonBcak}">
							提交
						</view>
					</view>
				</view>
			</view>
		</uni-popup>
	
		<uni-popup ref="bindingDialog" type="center" :maskBackgroundColor="'rgba(0,0,0,0.5)'" :isMaskClick="false">
			<view class="store-view store-border-all tips-padding"
				:style="{'background':kbackgroundColor,color:knormalColor}"
				:class="[{'alert-border-black alert-border-shadow-black':ktheme =='black'},{'alert-border-purple':ktheme =='purple'}]">
				<text class="popup-title">提示</text>
				<text class="popup-subtitle">{{tiMesee}}</text>
				<view class="tips-bottom">
					<view class="tips-button"
						:class="[{'tips-cancel-bg-black':ktheme =='black'},{'tips-cancel-bg-white':ktheme =='purple'}]"
						@click="bindingClose()">取消购买</view>
					<view class="tips-button" :style="{background:kbuttonBgColor}" @click="bindingCheck()">去开通
					</view>
				</view>
			</view>
		</uni-popup>
		<template>
			<view class="">
				<uni-popup ref="reDialog" type="dialog">
					<uni-popup-dialog :type="tiType" cancelText="关闭" confirmText="跳转" title="提示"
						content="实名认证后才能购买数字科技商品!" @confirm="tiaozhanConfirm"
						@close="tiaozhuanClose"></uni-popup-dialog>
				</uni-popup>
			</view>
			<!-- 	<view style="height: 88rpx;"></view>
			<view class="renzheng_box">
				实名认证后才能购买数字版权
				<view class="go_apply2" :style="selStyle" @tap="go_apply2">
					去实名
				</view> -->
			<!-- </view> -->
		</template>
	</view>

</template>

<script>
	import {
		navigateTo
	} from '../../config/common.js'
	export default {
		data() {
			return {
				tiMesee:'',
				walletStatus: {},
				pay_way: null,
				pay_way_fast: null,
				tiType: "",
				ifscroll: false,
				scrollTop: 0,
				borderSty: this.$store.state.borderSty, //邊框
				knavTitleColor: this.$store.state.knavTitleColor, //字体暂用
				buttonBcak: this.$store.state.buttonBcak, //按钮颜色
				ColorSize: this.$store.state.ColorSize, //背景顔色
				seltyle: {
					'--ColorSize': this.$store.state.ColorSize, //背景顔色
					'--borderSty': this.$store.state.borderSty, //邊框
				},
				id: '',
				list: [],
				page: 1,
				hasNextPage: true,
				limit: 10,
				info: {
					mang_list: []
				},
				order: true,
				goods_id: '',
				batchNum: 1,
				yansheng: "",
				isLoading: false,
				orderSum: {},
				circulate: "",
				typeId: 1,
				typeList: [{
					id: 1,
					name: '查看流转记录'
				}, {
					id: 2,
					name: '折线流转图'
				}],
			}
		},
		//滑动显示火箭返回顶部
/* 		onPageScroll(e) {
			if (this.scrollTop >= 330) {
				this.ifscroll = true
			} else {
				this.ifscroll = false
			}
			this.scrollTop = e.scrollTop;
		}, */
		onLoad(options) {
			this.yansheng = this.$store.state.ktheme
			this.id = options.id;
			this.circulate = options.circulate;
			this.goods_id = options.goods_id;
			this.get_info()
		},
		onShow() {
			if (this.id) {
				this.page = 1;
				this.get_data_list()
			}
			this.getOrderSum()
			this.getWalletStatus()
		},
		onPullDownRefresh() {
			this.page = 1;
			this.getOrderSum()
			this.get_data_list();
			uni.stopPullDownRefresh();
		},
		onReachBottom() {
			console.log("滑动", this.hasNextPage)
			if (this.hasNextPage && !this.isLoading) {
				this.page = this.page + 1;
				this.get_data_list();
			}
			if (this.scrollTop >= 330) {
				this.ifscroll = true
			} else {
				this.ifscroll = false
			}
		},

		methods: {
			bindingClose() {
				this.$refs.bindingDialog.close()
			},
			bindingCheck() {
				this.$refs.bindingDialog.close()
				uni.navigateTo({
					url: '/pages/user/wallet/wallet-list'
				})
			},
			getWalletStatus() {
				this.$api.userInfo({}, res => {
					if (res.status && res.data.walletStatus) {
						this.walletStatus = res.data.walletStatus;
						// uni.setStorage('walletStatue', res.data.walletStatus)
					}
				})
			},
			selectType(index) {
				if (index == 0) {
					uni.navigateTo({
						url: '/pages/mart/record?iid=' + this.id
					})
				} else {
					uni.navigateTo({
						url: '/pages/mart/mart-kmap?iid=' + this.id + '&name=' + this.info.name,
					})
				}
			},
			//实名去实名
			tiaozhanConfirm() {
				uni.navigateTo({
					url: "/pages/user/apply/apply"
				})
				this.$refs.reDialog.close()
			},
			tiaozhuanClose() {
				this.$refs.reDialog.close()
			},
			scrollClick(val) {
				uni.pageScrollTo({
					scrollTop: val,
					duration: 100,
				})
				this.scrollTop = val
			},
			openbatch() {
				if(	this.walletStatus.xtStatus==0  ){
					this.tiMesee='您未开通系统钱包,请开通后购买'
					this.$refs.bindingDialog.open()
				}else if(this.walletStatus.hfStatus==0 && this.walletStatus.sdStatus==0){
					this.tiMesee='您未开通汇付/杉德钱包,请开通后购买'
						this.$refs.bindingDialog.open()
				} else{
						this.$refs.orderForm.open();
				}
				
				
				
				
				// if (!this.walletStatus.sdStatus && !this.walletStatus.hfStatus && !this.walletStatus.xtStatus) {
				// 	uni.showModal({
				// 		title: '提示',
				// 		content: '请前往开通钱包',
				// 		showCancel: false,
				// 		confirmText: '去开通',
				// 		success(res) {
				// 			if (res.confirm) {
				// 				uni.redirectTo({
				// 					url: '/pages/user/wallet/wallet-list',
				// 				})
				// 			}
				// 		},
				// 	});
				// 	return false
				// }
				// this.$refs.orderForm.open();
			},
			openfast() {
				// if (!this.walletStatus.sdStatus && !this.walletStatus.hfStatus && !this.walletStatus.xtStatus) {
				// 	uni.showModal({
				// 		title: '提示',
				// 		content: '请前往开通钱包',
				// 		showCancel: false,
				// 		confirmText: '去开通',
				// 		success(res) {
				// 			if (res.confirm) {
				// 				uni.redirectTo({
				// 					url: '/pages/user/wallet/wallet-list',
				// 				})
				// 			}
				// 		},
				// 	});
				// 	return false
				// }
				if(	this.walletStatus.xtStatus==0  ){
					this.tiMesee='您未开通系统钱包,请开通后购买'
					this.$refs.bindingDialog.open()
				}else if(this.walletStatus.hfStatus==0 && this.walletStatus.sdStatus==0){
					this.tiMesee='您未开通汇付/杉德钱包,请开通后购买'
						this.$refs.bindingDialog.open()
				} else{
						this.$refs.fastForm.open();
				}
				
			
			},
			closebatch() {
				this.$refs.orderForm.close();
			},
			closefast() {
				this.$refs.fastForm.close();
			},
			changeValue(a) {
				this.batchNum = a;
			},
			getOrderSum() {
				this.$api.getOrderSum(this.id, res => {
					if (res.status) {
						this.orderSum = res.data
					}
				})
			},
			createBatchOrder() {
				if (!this.pay_way) {
					uni.showToast({
						icon: 'none',
						title: '需要选择支付方式'
					})
					return false
				}
				let body = {
					iid: this.id,
					payWay: this.pay_way,
					quantity: this.batchNum,
					type: 1
				}

				this.$api.createBatchOrder(body, res1 => {
					if (res1.status) {
						uni.navigateTo({
							url: '/pages/payment/batch?order_id=' + res1.data + '&type=2&payWay=' + this
								.pay_way
						})
					} else {
						this.$api.userAccount({}, res => {
							if (res.status) {
								this.show_renzheng = res.data.isCertified;
								if (!this.show_renzheng) {
									setTimeout(() => {
										this.$refs.reDialog.open()
									}, 1000);
								} else {
									if (res.message) {
										this.$common.errorToShow(res.message)
										
									}
								}
							}
						})
						if (res1.code == 52010) {
							// 用户未上链
						} else if (res1.message) {
								this.$common.errorToShow(res1.message)
							// uni.showToast({
							// 	icon: 'none',
							// 	title: res1.message
							// })
						}
					}
				})
			},
			toRecord() {
				uni.navigateTo({
					url: '/pages/mart/record?iid=' + this.id
				})
			},
			pushKmap() {
				uni.navigateTo({
					url: '/pages/mart/mart-kmap?iid=' + this.id
				})
			},
			toAllshop() {
				uni.navigateTo({
					url: '/pages/mart/item_all_list?iid=' + this.id
				})
			},
			get_info() {
				if (!this.id) {
					this.$common.errorToShow('商品失效')
					uni.navigateBack()
					return;
				}
				let userToken = this.$db.get("userToken");
				let data = {
					sn: this.id
				}
				if (userToken) {
					data.token = userToken;
				}
				this.$api.getGoodsDetails(this.id, res => {
					if (res.status) {
						this.info = res.data;
					}
				})
			},

			get_data_list: function() {
				this.isLoading = true
				let data = {
					pageNo: this.page,
					// limit: this.limit,
					iid: this.id,
					orderBy: 'price',
					asc: this.order
				}

				let token = (this.$db.get('userToken'));
				if (token) data.token = token
				this.$api.getMarketGoodsListt(data, res => {
					this.isLoading = false
					if (res.status) {
						if (this.page == 1) {
							this.list = [];
							this.list = res.data;
						} else {
							this.list = this.list.concat(res.data);
						}
						this.hasNextPage = res.data.length >= this.limit;
					}
				})
			},
			setOrder: function(order) {
				this.order = order;
				this.page = 1;
				this.get_data_list()
			},
			go_detail: function(item) {
				if (item.status == 2) {
					this.$common.errorToShow('该商品正在交易中，看看别的吧')
					return;
				}
				uni.navigateTo({
					url: '/pages/mart/mart_details?id=' + item.nftId + '&circulate=' + this.circulate
				})
			},
			confirm: function() {
				if (!this.pay_way_fast) {
					uni.showToast({
						icon: 'none',
						title: '需要选择支付方式'
					})
					return false
				}
				let data = {
					iid: this.info.iid,
					payWay: this.pay_way_fast
				};
				this.$api.createMartOrder(data, res1 => {
					if (res1.status) {
						this.$common.navigateTo('/pages/payment/index?order_id=' + res1.data + '&payWay=' +
							this.pay_way_fast);
					} else {
						this.$api.userAccount({}, res => {
							if (res.status) {
								this.show_renzheng = res.data.isCertified;
								if (!this.show_renzheng) {
									setTimeout(() => {
										this.$refs.reDialog.open()
									}, 1000);
								} else {
									if (res.message) {
											this.$common.errorToShow(res.message)
									}
								}
							}
						})
						if (res1.code == 52010) {
							// 用户未上链
						} else if (res1.message) {
							this.$common.errorToShow(res1.message)
						}
					}
				})
			},
		},
	}
</script>

<style lang="scss">
	@import "@/pages/index/detail.scss";
</style>

<style lang="scss" scoped>
	.order_pay_select {
		display: flex;
		align-items: center;

		image {
			width: 90rpx;
			margin-left: 25rpx;
			height: 90rpx;
		}
	}

	.new_pay_container {
		display: flex;
		align-items: center;

		text {
			font-size: 22rpx;
			font-weight: 500;
			margin-top: 5rpx;
			margin-right: 15rpx;
		}

		image {
			width: 45rpx;
			height: 45rpx;
		}
	}

	/deep/ .uni-numbox__minus {
		font-size: 30px;
	}

	/deep/ .uni-numbox__plus {
		font-size: 30px;
	}

	/deep/ .uni-numbox__value {
		font-size: 20px;
		width: 110rpx;
	}


	.collect_img_box {
		padding-top: 57rpx;

		.title {
			text-align: center;
			font-size: 32rpx;

			font-family: SimHei;
			font-weight: 400;
			margin: 25rpx 0 30rpx;
		}

		.dataWrap {
			display: flex;
			align-items: center;
			justify-content: center;
			margin-bottom: 20rpx;

			.data {
				color: white;
				width: 230rpx;
				text-align: center;
				display: flex;
				justify-content: space-evenly;
				border-radius: 60rpx;
				border: 1px solid #A3B665;
			}

			.num {
				width: 230rpx;
				text-align: center;
				display: flex;
				justify-content: space-evenly;
				border-radius: 60rpx;
				border: 1px solid blueviolet;
				color: black;
			}

			&>view:first-child {
				margin-right: 19rpx;
			}
		}
	}

	.btntk {
		width: 590rpx;
		height: 80rpx;
		margin: 10rpx auto;
		border-radius: 100rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 32rpx;
		color: #fff;
		font-weight: 400;
	}

	.border-purple {
		box-shadow: inset 0rpx 0rpx 50rpx 0rpx rgba(254, 162, 221, 0.91) !important;
		border: 4rpx solid transparent !important;
		background-color: #fff !important;
	}

	.border-black {
		border: 4rpx solid transparent !important;
		background-clip: padding-box, border-box !important;
		background-origin: padding-box, border-box !important;
		background-image: linear-gradient(to bottom, #222, #222), linear-gradient(180deg, rgba(244, 249, 123, 1), rgba(84, 203, 122, 1)) !important;
	}

	.detail-item {
		margin: 20rpx 0;
		display: flex;
		flex-direction: column;
		align-items: center;
		font-size: 28rpx;
		font-weight: bold;

		.line {
			width: 170rpx;
			margin-top: 8rpx;
			height: 3rpx;
		}
	}

	.tab_box {
		width: 100%;
		padding: 30rpx 70rpx 0;
		display: flex;
		align-items: center;
		// justify-content: space-between;
		justify-content: space-around;

		.tab_dd {
			font-size: 32rpx;
			color: var(--tabNormalColor);
			font-weight: 400;
			position: relative;
		}

		.tabActive {
			color: var(--selectColorSize);
			font-weight: bold;
		}

		.tabActive::after {
			display: block;
			clear: both;
			content: '';
			width: 65%;
			height: 10rpx;
			// background:red;
			background: var(--selBcakborder);
			border-radius: 100rpx;
			position: absolute;
			left: 50%;
			bottom: -16rpx;
			transform: translateX(-50%);
		}
	}

	.price-view {
		margin: 0 40rpx;
		display: flex;
		flex-direction: row;
		border-radius: 30rpx;

		.price-current {
			width: 240rpx;
			margin: 10rpx;
			border-radius: 20rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;

			.title {
				font-size: 30rpx;
			}

			.price {
				margin-top: 10rpx;
				font-size: 36rpx;
				font-weight: bold;
			}
		}

		.price-column {
			display: flex;
			flex-direction: column;
			margin-bottom: 20rpx;
			margin-left: 20rpx;
			margin-top: 20rpx;

			.price-row {
				display: flex;
				flex-direction: row;
				align-items: center;
				margin-top: 10rpx;

				.title {
					font-size: 28rpx;
					width: 160rpx;
					color: #919191;
				}

				.subtitle {
					font-size: 28rpx;
				}
			}
		}
	}

	.content {

		// margin:40rpx;
		// padding-bottom: 80rpx;
		// border-radius: 30rpx;
		.list-view {
			margin: 40rpx;
			border-radius: 30rpx;
			margin-bottom: 80rpx;
		}

		.goodslist {
			width: 100%;
			height: auto;
			border-radius: 20rpx;
			padding: 25rpx 26rpx 0 32rpx;

			.sort-white {
				background-color: #ffffff;
			}

			.sort-black {
				background-color: #000;
			}

			.sort {
				margin-bottom: 12rpx;

				.sort_box {
					width: 100%;
					display: flex;
					flex-direction: row;
					justify-content: space-between;
					align-items: center;

					.sort_box-item {
						font-size: 32rpx; //28rpx;
						color: #919191;
						position: relative;
					}

					.active {
						// color: white;
						font-weight: bold;
					}

					.active-white {
						color: #000;
					}

					.active-black {
						color: #ffffff;
					}

					.active::after {
						display: block;
						clear: both;
						content: '';
						width: 100%;
						height: 8rpx;
						background: var(--ColorSize); //linear-gradient(308deg, #FE0058 0%, #FF5B6C 100%);
						border-radius: 100rpx;
						position: absolute;
						left: 3rpx;
						// bottom: -5rpx;
					}
				}
			}

			.scroll {
				width: 100%;
				max-height: 582rpx;
			}

			.list {
				width: 100%;

				.item {
					padding: 30rpx 0;
					border-bottom: 1rpx solid #EBEBEB;
					display: flex;
					align-items: center;

					.ceil {
						.label {
							display: flex;
							align-items: center;

							image {
								width: 32rpx;
								height: 32rpx;
								display: block;
								margin-right: 8rpx;
							}

							text {
								font-size: 36rpx;
								// color: #000;
								font-weight: bold;
							}
						}

						.name {
							font-size: 22rpx;
							color: #999;
							font-weight: 500;
							margin-top: 5rpx;
						}

						.price {
							text {
								font-size: 36rpx;
								// color: #000;
								font-weight: bold;
							}

							.unit {
								font-size: 24rpx;
							}
						}

						.buy {
							width: 120rpx;
							height: 42rpx;
							background: linear-gradient(308deg, #FE0058 0%, #FF5B6C 100%);
							border-radius: 100rpx;
							text-align: center;
							line-height: 42rpx;
							font-size: 18rpx;
							color: #fff;
							font-weight: 500;
						}

						.status {
							width: 120rpx;
							height: 42rpx;
							background-color: #FFE4E8;
							border-radius: 45rpx;
							text-align: center;
							line-height: 42rpx;
							font-size: 18rpx;
							color: #863A3A;
							font-weight: 500;
						}
					}
				}

				&>view:last-child {
					border-bottom: 0;
				}
			}
		}
	}


	.font-blod {
		font-weight: 800;
	}

	.m-t-5 {
		margin-top: 5rpx;
	}

	.bottom-view {
		text-align: center;
		display: flex;
		position: fixed;
		justify-content: space-between;
		left: 0;
		bottom: 0;
		width: 100%;
		z-index: 100;
		padding: 40rpx 40rpx;
	}

	.operate {
		width: 280rpx;
		height: 80rpx;
		background: linear-gradient(308deg, #FE0058 0%, #FF5B6C 100%);
		border-radius: 100rpx;
		text-align: center;
		line-height: 80rpx;
		font-size: 32rpx;
		color: #fff;
		font-weight: 400;
		z-index: 10;
	}

	.qbnoticeTip {
		width: 119rpx;
		height: 41rpx;
		z-index: 20;
		background-color: #fff;
		border-radius: 100rpx 0 0 100rpx;
		// border: 2rpx solid #FE005A;
		border-right: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 22rpx;
		color: #333;
		font-weight: 400;
		position: absolute;
		top: 184rpx;
		right: 0;
		// z-index: 10;
	}

	.scrollClsss {
		position: fixed;
		bottom: 220rpx;
		right: -16rpx;
		z-index: 999;
		width: 120rpx;
		height: 100rpx;
	}

	.ifsceollclass {
		text-align: center;
		position: fixed;
		top: 0;
		left: 40rpx;
		z-index: 100;
		padding: 30rpx 43rpx;
		width: 90%;
		// background-color: #ffffff;
		margin: 0 auto;
		// background: linear-gradient(0deg, #c9ffdb 0%, #fbfda6  100%);
		// border-radius: 15px 15rpx 0 0;
		// // border: 5px solid;
		// border-image: linear-gradient(0deg, #a5ffc3, #fbfda6) 10 10;
		// -webkit-clip-path: inset(0 round 6px);
		// clip-path: inset(0 round 6px);
	}

	.sortsce {
		width: 100%;
	}
</style>